<template>
  <div class="content">
    <div class="column-3">
      <div class="panel">
        <h3>行业现状</h3>
        <div class="chart">
          <my-chart :options="options1"></my-chart>
        </div>
        <div class="panel-footer"></div>
      </div>
      <div class="panel">
        <h3>行业现状</h3>
        <div class="chart">
          <my-chart :options="options3"></my-chart>
        </div>
        <div class="panel-footer"></div>
      </div>
      <div class="panel">
        <h3>行业现状</h3>
        <div class="chart">
          <my-chart :options="options5"></my-chart>
        </div>
        <div class="panel-footer"></div>
      </div>
    </div>
    <div class="column-5">
      <div class="top">
        <div class="bd">
          <ul>
            <li>123456</li>
            <li>123456</li>
          </ul>
        </div>
        <div class="hd">
          <ul>
            <li>前端需求人数</li>
            <li>前端需求人数</li>
          </ul>
        </div>
      </div>
      <div class="btm">
        <div class="map1"></div>
        <div class="map2"></div>
        <div class="map3"></div>
        <div class="china-map">
          <my-chart :options="options7"></my-chart>
        </div>
      </div>
    </div>
    <div class="column-3">
      <div class="panel">
        <h3>行业现状</h3>
        <div class="chart">
          <my-chart :options="options2"></my-chart>
        </div>
        <div class="panel-footer"></div>
      </div>
      <div class="panel">
        <h3>行业现状</h3>
        <div class="chart">
          <my-chart :options="options4"></my-chart>
        </div>
        <div class="panel-footer"></div>
      </div>
      <div class="panel">
        <h3>行业现状</h3>
        <div class="chart">
          <my-chart :options="options6"></my-chart>
        </div>
        <div class="panel-footer"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import MyChart from '../my-chart/indexView.vue'
import { options1, options2, options3, options4, options5, options6 } from './config'
import { options7 } from './map.js';
</script>

<style lang="scss">
@font-face {
  font-family: font-aa;
  src: url('../../assets/font/DS-DIGIT.TTF');
}

@keyframes run {
  0% {
    transform: translate(-50%, -50%) rotateZ(0);
  }

  100% {
    transform: translate(-50%, -50%) rotateZ(360deg);
  }
}

.content {
  display: flex;
  color: white;
  padding: 4px;

  .column-3 {
    flex: 3;

    .panel {
      height: 310px;
      background-image: url(../../assets/images/line.png);
      border: 1px solid rgba(25, 186, 139, 0.17);
      position: relative;
      background-color: rgba($color: #fff, $alpha: .03);
      margin-bottom: 6px;

      h3 {
        text-align: center;
        height: 50px;
        line-height: 50px;
      }

      .chart {
        height: 260px;
        // background-color: red;
      }


      .panel-footer {
        &::before {
          position: absolute;
          left: 0;
          bottom: 0;
          width: 10px;
          height: 10px;
          border-left: 2px solid skyblue;
          border-bottom: 2px solid skyblue;
          content: '';
        }

        &::after {
          position: absolute;
          right: 0;
          bottom: 0;
          width: 10px;
          height: 10px;
          border-right: 2px solid skyblue;
          border-bottom: 2px solid skyblue;
          content: '';
        }
      }

      &::before {
        content: '';
        position: absolute;
        width: 10px;
        height: 10px;
        border-top: 2px solid skyblue;
        border-left: 2px solid skyblue;
        top: 0;
        left: 0;
      }

      &::after {
        content: '';
        position: absolute;
        width: 10px;
        height: 10px;
        border-top: 2px solid skyblue;
        border-right: 2px solid skyblue;
        top: 0;
        right: 0;
      }
    }
  }

  .column-5 {
    flex: 5;
    margin: 0 10px;

    .top {
      background-color: rgba($color: #fff, $alpha: .03);
      padding: 10px;

      .bd {
        ul {
          border: 1px solid rgba(25, 186, 139, 0.17);
          display: flex;
          height: 100px;

          li {
            flex: 1;
            text-align: center;
            font-size: 80px;
            color: yellow;
            font-family: font-aa;
            line-height: 100px;
            position: relative;

            &:nth-child(1) {
              &::after {
                content: '';
                width: 2px;
                height: 60px;
                background-color: rgba($color: #fff, $alpha: .2);
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
              }
            }
          }
        }
      }

      .hd {
        ul {
          display: flex;

          li {
            line-height: 60px;
            flex: 1;
            text-align: center;
            font-size: 26px;
            color: rgba($color: #fff, $alpha: .7);
          }
        }
      }
    }

    .btm {
      height: 700px;
      position: relative;

      // background-color: red;
      .map1 {
        width: 518px;
        height: 518px;
        background-image: url(../../assets/images/map.png);
        background-size: 100% 100%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        opacity: .3;
      }

      .map2 {
        // 旋转1 map 2 大小为 643px 要加背景图片 因为要缩放100% 定位到中央 透明度 .6 做旋转动画 利用z-index压住球体
        width: 643px;
        height: 643px;
        background-image: url(../../assets/images/lbx.png);
        background-size: 100% 100%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        opacity: .6;
        animation: run 15s linear infinite;

      }

      .map3 {
        width: 566px;
        height: 566px;
        background-image: url(../../assets/images/jt.png);
        background-size: 100% 100%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        animation: run 15s linear infinite reverse;
      }

      .china-map {
        width: 100%;
        height: 100%;
      }
    }

  }
}

.qwe {
  color: rgba($color: rgb(106, 149, 209), $alpha: 1.0);
}
</style>